<template>
  <div class="comm">
    <header>
      <i class="el-icon-user"></i>
      解说阵容
    </header>
    <div class="comm_con">
      <ul class="tab-tilte">
        <li @click="cur=0" :class="{active:cur==0}">解说</li>
        <li @click="cur=1" :class="{active:cur==1}">裁判</li>
      </ul>
      <div class="tab-content">
        <div v-show="cur==0" class="comm_con2">
          <div class="commentary-substance">
            <div class="commentary-list" v-for="(item,index) in commlist" :key="index">
              <div class="commentary-lb">
                <div class="commentary-type" :class="item.zone==1?'west':'east'">{{item.zone==1?'东部':'西部'}}</div>
                <div class="commentary-img"><img
                    :src="item.pic"></div>
              </div>
              <div class="commentary-rb">
                <div class="commentary-rb-title"><b>{{item.name}}</b> <span>{{item.recomment}}</span></div>
                <div class="commentary-rb-word">{{item.intro}}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="cur==1" class="comm_con2">
          <div class="commentary-substance">
            <div class="commentary-list" v-for="(item,index) in introlist" :key="index">
              <div class="commentary-lb">
                <div class="commentary-img">
                  <img :src="item.pic">
                </div>
              </div>
              <div class="commentary-rb">
                <div class="commentary-rb-title">
                  <b>{{item.name}}</b>
                   <span>{{item.recomment}}</span>
                </div>
                <div class="commentary-rb-word">
                  {{item.intro}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    cur: 0,
    commlist: [],
    introlist: []
  }),
  created () {
    this.getcommdata()
    this.getintrdata()
  },
  methods: {
    async getcommdata () {
      const { data } = await this.$axios.get('/match/commdata')
      this.commlist = data
      // console.log(this.commlist)
    },
    async getintrdata () {
      const { data } = await this.$axios.get('/match/introdata')
      this.introlist = data
      // console.log(this.introlist)
    }
  }
}
</script>
<style lang="less" scoped>
li{
  list-style: none;
}
.comm{
  width: 360px;
  header{
    height: 40px;
    font-size: 22px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
  }
  .comm_con{
    .tab-tilte{
      display: flex;
      padding-left: 0;
      li{
        width: 50%;
        height: 36px;
        background-color: #ddd;
        text-align: center;
        line-height: 36px;
      }
      .active{
        color: #fff;
        background-color: #f3c258;
      }
    }
    .tab-content{
      width: 100%;
      .comm_con2{
        overflow: hidden;
        height: 420px;
        overflow-y: auto;
      }
      .commentary-substance {
        margin-top: 8px;
        .commentary-list {
          width: 360px;
          height: 100px;
          background: #f4f5f4;
          margin-bottom: 3px;
          .commentary-lb {
            position: relative;
            width: 90px;
            float: left;
            margin-left: 15px;
            margin-top: 5px;
            .commentary-type {
              position: absolute;
              left: -7px;
              width: 35px;
              height: 20px;
              border-radius: 5px;
              line-height: 20px;
              color: #fff;
              font-size: 12px;
              text-align: center;
            }
            .east {
              background: #cc2a34;
              border: 1px solid #f3c258;
            }
            .west {
              background: #1d31a8;
              border: 1px solid #f3c258;
            }
            .commentary-img {
              width: 90px;
              height: 90px;
              border-radius: 45px;
              border: 1px solid #f3c258;
              display: flex;
              overflow: hidden;
              img {
                max-width: 90px;
                display: block;
                text-align: center;
                margin: 0 auto;
              }
            }
          }
          .commentary-rb {
            width: 220px;
            margin-right: 20px;
            margin-top: 5px;
            float: right;
            .commentary-rb-title {
              width: 200px;
              color: #363636;
              height: 35px;
              line-height: 35px;
              border-bottom: 1px solid #000;
              border-image: url(//game.gtimg.cn/images/yxzj/match/center2018/images/commentary-splite.png) 185 1 round;
              b {
                font-size: 24px;
              }
              span {
                font-size: 14px;
              }
            }
            .commentary-rb-word {
              font-size: 14px;
              line-height: 24px;
              color: #363636;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
            }
          }
        }
      }
    }
  }
}
</style>
